<template>
	<view style="display: flex;">
		<view style="width: 150rpx;background: #F5F5F5;text-align: center;font-size: 30rpx;">
			<scroll-view class="mainBox_" style="" scroll-y="true">
				<view v-for="(itme,index) in classification" :key="index" :style="{background: initialiData === index ? '#FF7301' : '' }" @tap="switchDataFun(index,itme)" class="xiaoBao">
					{{itme}}
				</view>
			</scroll-view>
		</view>
		<view style="width: 600rpx;background: #FFFFFF;">
			<scroll-view class="mainBox" refresher-background="#ffffff" scroll-y="true" @scrolltolower="scrolltolower">
				<view v-for="(itme,index) in teacherData" :key="index" class="contenCla" @tap="xiangqing_(itme)">
					<view>
						<image :src="itme.photo" class="img"></image>
					</view>
					<view style="font-size: 30rpx;font-weight: bold;color: #FF7301;margin-left: 30rpx;">
						<view style="margin: 20rpx 0;">{{itme.full_name}}</view>
						<view>{{itme.specialty}}</view>
					</view>
				</view>
				<view style="width: 100%;height: 500rpx;text-align: center;line-height: 500rpx;font-size: 30rpx;font-weight: bold;" v-if="canDisp">
					暂无数据
				</view>
				<view style="border-top: 0.5rpx #DCDCDC solid;width: 100%;height: 100rpx;line-height: 100rpx;text-align: center;font-size: 25rpx;margin-top: 10rpx;" v-if="canxian">
					没有更多了
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				classification: ["推荐","舞蹈","美术","书法","乐器","唱歌","表演","口才","游泳","篮球","足球","轮滑","网球","羽毛球","兵乓球","高尔夫","跆拳道","体适能","语文","数学","英语","乐高","编程","棋类","其他"],
				initialiData: 0,
				specialty: "",
				currentPage: 1,
				teacherData: [],
				signData: 1,
				canDisp: false,
				canxian: false
			}
		},
		
		onLoad() {
			this.teacherList()
		},
		
		methods: {
			
			xiangqing_(itt) {
				uni.navigateTo({
					url:'/pages/Meet/sijiaoList/sijiaoList?teacherId=' +  itt.id
				})
			},
			
			scrolltolower() {
				if(this.signData == 1) {
					this.currentPage++
					this.teacherList()
				}else {
					uni.showToast({
						title: "加载完毕",
						icon: "none"
					})
				}
			},
			
			switchDataFun(index,itme) {
				this.initialiData = index
				if(itme == "推荐") {
					this.specialty = ""
				}else {
					this.specialty = itme
				}
				this.teacherData = []
				this.currentPage = 1
				this.teacherList()
			},
			
			teacherList() {
				this.$myRequest({
					url: "/masterInfo/queryTeachPayByEs",
					data: {
						type: "teach_paypal",
						pageSize: 10,
						currentPage: this.currentPage,
						status: 2,
						specialty: this.specialty
					}
				}).then((res) => {
					if(this.teacherData.length !== 0 && res.data.length < 10) {
						this.canxian = true
					}else {
						this.canxian = false
					}
					if(this.teacherData.length == 0 && res.data.length == 0){
						this.canDisp = true
					}else {
						this.canDisp = false
					}
					if(res.data.length < 10){
						this.signData = 2
					}else {
						this.signData = 1
					}
					this.teacherData = this.teacherData.concat(res.data)
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.mainBox {
		height: 100vh;
		padding: 10rpx 0;
		box-sizing: border-box;
		.contenCla {
			width: 500rpx;
			height: 200rpx;
			box-sizing: border-box;
			background: #DCDCDC;
			margin: 20rpx 0 0 50rpx;
			padding: 25rpx;
			border-radius: 20rpx;
			display: flex;
			.img {
				height: 150rpx;
				width: 150rpx;
				border-radius: 20rpx;
			}
		}
	}
	.mainBox_ {
		height: 100vh;
		padding: 10rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/deep/::-webkit-scrollbar {
		 display: none;
		 width: 0;
		 height: 0;
		 color: transparent;
		 background: transparent;
	}
	.xiaoBao {
		margin-top: 15rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 20rpx;
	}
</style>